<!-- Dom模板 -->
<template>
  <div class="loading">
    <div class="redirect">
      {{ num }}
      <span @click="skip">跳过</span>
    </div>
    <!-- Dom内容 -->
    <img src="../../img/loading.jpg" alt="" />
  </div>
</template>
<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      num: 6,
      setInter:null
    };
  },

  // 监听属性
  computed: {},
  // 组件挂载的地方
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.setInter = setInterval(() => {
      if (this.num != 0) {
        this.num -= 1;
      } else {
        this.skip();
        clearInterval(this.setInter);
      }
    }, 1000);
  },
  // Vue方法定义
  methods: {
    skip() {
      clearInterval(this.setInter);
      this.$router.push({
        path: "/home"
      });
    }
  }
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}
.loading img {
  width: 100%;
  height: 100%;
}
.redirect {
  width: 60px;
  height: 25px;
  border-radius: 13px;
  position: fixed;
  top: 10px;
  right: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.571);
  font-size: 12px;
  text-align: center;
  line-height: 24px;
}
.redirect span {
  margin-left: 5px;
}
</style>
